<template>
    <div class="operationLog">
        <div class="header flexbetween mb20">
            <div style="display: flex">
                <el-radio-group v-model="time" size="small" class="mr20" @change="radioTimeChange">
                    <el-radio-button label="0">今天</el-radio-button>
                    <el-radio-button label="1">昨天</el-radio-button>
                    <el-radio-button label="7">近一周</el-radio-button>
                    <el-radio-button label="30">近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker v-model="date" size="small" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss" @change="dateRangeChange" :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
                <el-input placeholder="输入搜索" v-model="keyWord" size="small" style="width: 300px">
                    <span slot="suffix" class="iconfont icon-sousuo" @click="searchList"></span>
                </el-input>
            </div>
            <div class="iconBtn">
                <el-tooltip effect="light" content="筛选" placement="top" :enterable="false">
                    <span class="iconfont icon-shaixuan" @click="filterVisivle = true"></span>
                </el-tooltip>
            </div>
        </div>
        <element-table :data="logList" :columns="cloumns" :loading="tableLoading" :tableHeight="tableHeight" :pageNo="pageNo"
                       :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize">
        </element-table>

        <!-- 筛选 -->
        <div id="logFilter" class="filterDialog" v-show="filterVisivle">
            <div class="searchBox">
                <div class="searchItem">
                    <span>模块</span>
                    <el-select v-model="modules" placeholder="请选择" clearable size="small">
                        <!-- <el-option label="知识库-FAQ" value="1"></el-option>
                        <el-option label="知识库-多轮会话" value="2"></el-option>
                        <el-option label="知识中转站-新增问题" value="3"></el-option>
                        <el-option label="知识中转站-纠错问题" value="3"></el-option>
                        <el-option label="知识回收站" value="3"></el-option>
                        <el-option label="词库管理" value="3"></el-option>
                        <el-option label="素材管理" value="3"></el-option>
                        <el-option label="知识集管理" value="3"></el-option>
                        <el-option label="未知问题" value="3"></el-option>
                        <el-option label="智能训练" value="3"></el-option>
                        <el-option label="自定义标签" value="3"></el-option> -->
                        <el-option label="FAQ管理" value="1"></el-option>
                        <el-option label="素材管理" value="2"></el-option>
                        <el-option label="标签管理" value="3"></el-option>
                        <el-option label="渠道管理" value="4"></el-option>
                        <el-option label="词库管理" value="5"></el-option>
                        <el-option label="智能学习" value="6"></el-option>
                    </el-select>
                </div>
                <div class="searchItem">
                    <span>操作人</span>
                    <el-select v-model="userId" placeholder="请选择" clearable size="small">
                        <el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="searchItem">
                    <span>操作类型</span>
                    <el-select v-model="operation" placeholder="请选择" clearable size="small">
                        <el-option v-for="item in operationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="footer">
                <el-button size="small" type="text" @click="filterVisivle = false">取消</el-button>
                <el-button size="small" plain @click="resetSearch">重置</el-button>
                <el-button type="primary" size="small" @click="searchList">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import elementTable from "@/components/elementTable";
import { initFilterTime } from "@/utils/index";
import request from '@/utils/axios';
import { getUserList } from "@/api/knowledge";
export default {
    name: "operationLog",
    data() {
        return {
            time: "0",
            date: "",
            keyWord: "",
            logList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            cloumns: [
                {
                    config: {
                        label: "操作时间",
                        prop: "addTime"
                    },
                },
                {
                    config: {
                        label: "操作人",
                        prop: "userName"
                    },
                },
                {
                    config: {
                        label: "模块",
                        prop: "module"
                    },
                },
                {
                    config: {
                        label: "操作类型",
                        prop: "operation"
                    },
                },
                {
                    config: {
                        label: "对象名称",
                        prop: "action"
                    },
                },
            ],
            filterVisivle: false,
            userList: [],
            userId: "",
            modules: "",
            operation: ""
        }
    },
    methods: {
        getAdminLogList() {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            this.tableLoading = true;
            var requestData = {
                url: '/v1/admin/log/getAdminLogList',
                method: 'post',
                data: JSON.stringify({
                    addStartTime: this.date[0],
                    addEndTime: this.date[1],
                    module: this.modules,
                    operation: this.operation,
                    userId: this.userId,
                    type: "knowledgeAdmin",
                    keyWord: this.keyWord,
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                })
            }
            request(requestData).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    this.logList = resp.data.list || [];
                    this.total = resp.data.total;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        radioTimeChange(val) {
            this.date = initFilterTime(val, true);
            this.searchList();
        },
        dateRangeChange(val) {
            this.time = "";
            if (!val) {
                this.$antMessage.warning("请选择日期");
            } else {
                this.searchList();
            }
        },
        searchList() {
            this.pageNo = 1;
            this.getAdminLogList();
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getAdminLogList();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getAdminLogList();
        },
        getUserList() {
            var param = {
                pageNo: 1,
                pageSize: 999
            }
            getUserList(param).then(resp => {
                if (resp.status == 0) {
                    this.userList = resp.data.list;
                }
            });
        },
        resetSearch() {
            this.userId = this.modules = this.operation = "";
        }
    },
    created() {
        this.date = initFilterTime(0, true);
        this.getAdminLogList();
        this.getUserList();
        document.addEventListener('mouseup', (e) => {
            var logFilter = document.querySelector('#logFilter');
            if (logFilter) {
                if ($(e.target).parents(".el-popper").length == 0 && !logFilter.contains(e.target)) {
                    this.filterVisivle = false;
                }
            }
        });
    },
    computed: {
        tableHeight() {
            return document.body.clientHeight - 240;
        },
        operationList() {
            var list = [];
            if (this.modules) {
                list = [{ id: "1", name: "新增" }, { id: "2", name: "修改" }, { id: "3", name: "删除" }];
                if (this.modules == 1) {
                    list.push({ id: "4", name: "导出" });
                }
            }
            return list;
        }
    },
    components: {
        elementTable
    }
}
</script>

<style lang="scss">
.operationLog {
    .el-radio-button--small {
        .el-radio-button__inner {
            width: 80px;
            font-size: 14px;
        }
    }
    .header {
        .el-date-editor {
            width: 350px;
            margin-right: 20px;
        }
    }
    #logFilter {
        top: 145px;
    }
}
</style>